<template>
  <view class="my">
    <view class="header">
      <!-- 头部信息 -->
      <image
        :src="
          wxUserInfo.headimgurl ? wxUserInfo.headimgurl : this.defaultImages
        "
        mode="aspectFit"
      ></image>
      <text class="text-info">
        <text>
          {{ wxUserInfo.nickname }}
        </text>
        <text>
          {{ wxUserInfo.phone }}
        </text>
      </text>
    </view>
    <view class="info">
      <!-- //身份证信息 -->
      <view>
        <table>
          <tr class="tr-title">
            <td>姓名</td>
            <td>身份证号</td>
            <td>实名认证状态</td>
          </tr>
          <tr>
            <td>{{ userInfo.name }}</td>
            <td>{{ userInfo.id_card }}</td>
            <td>
              <text v-if="userInfo.auth_status === 1" class="coloe:green">已认证</text>
              <text v-else-if="userInfo.auth_status === 0" class="coloe:red">未认证</text>
              <text v-else></text>
            </td>
          </tr>
        </table>
      </view>
    </view>

    <view class="attendance">
      <!-- //考勤信息 -->
      <view class="btn">
        <button type="primary" @click="toDetail">查看考勤</button>
      </view>
      <view class="btn">
        <button type="primary" @click="goClockIn">考勤打卡</button>
      </view>
      <view class="btn">
        <button type="primary" @click="toRealAuth">实名认证</button>
      </view>
      <view class="btn">
        <button type="primary" @click="logOut">退出登录</button>
      </view>
    </view>
  </view> 
</template>

<script>
import { getWxUserInfo, getUserInfo } from "@/api/api.js";

export default {
  name: "my",
  data() {
    return {
      title: "我的",
      wxUserInfo: {
        nickname: "",
        headimgurl: "",
      }, // 微信用户信息
      userInfo: {
        name: "",
        id_card: "",
        phone: "",
      }, // 用户信息
      attendanceStatus: 0, // 打卡状态
      attendanceMsg: "", // 打卡信息
      locationRef: null,
      defaultImages: "/static/default-avatar.png",
    };
  },
  components: {},
  onLoad(options) {
    let userId = uni.getStorageSync("userId");
    let projectId = uni.getStorageSync("projectId");
    console.log("userId", userId);
    console.log("projectId", projectId);
    this.userId = userId;
    this.projectId = projectId;
    this.getWxUserInfo();
    this.getUserInfo();
  },
  methods: {
    async getWxUserInfo() {
      try {
        const res = await getWxUserInfo({
          userId: this.userId,
          projectId: this.projectId,
        });
        console.log("res", res);
        if (res.code === 1) {
          this.wxUserInfo = res.data;
        }
      } catch (err) {
        console.log("getWxUserInfo", err);
        uni.showToast({ title: "网络请求失败", icon: "none" });
      }
    },
    async getUserInfo() {
      console.log("获取用户信息", this.userId, this.projectId);
      try {
        const res = await getUserInfo({
          userId: this.userId,
          projectId: this.projectId,
        });
        if (res.code === 1) {
          this.userInfo = res.data;
          if (this.userInfo.id_card && this.userInfo.id_card.length > 10) {
            // 获取身份证号码的前部分
            const idCardPrefix = this.userInfo.id_card.substring(0, 3);
            // 获取身份证号码的后部分
            const idCardSuffix = this.userInfo.id_card.substring(
              this.userInfo.id_card.length - 4
            );
            // 生成中间用 * 替代的身份证号码
            const maskedIdCard = idCardPrefix + "**********" + idCardSuffix;
            // 将处理后的身份证号码赋值给 userInfo 的 id_card 字段
            this.userInfo.id_card = maskedIdCard;
          }
        }
      } catch (err) {
        console.log("getUserInfo", err);
        uni.showToast({ title: "网络请求失败。", icon: "none" });
      }
    },
    requestLocationPermission() {
      const location = this.locationRef
        .getLocation() // 调用 getLocation 方法获取精准定位
        .then((res) => {
          // res 就是返回的数据
          uni.showModal({
            content: JSON.stringify(res, null, 4),
          });
          return res;
        });
    },
    //去考勤详情页面
    toDetail() {
      uni.navigateTo({
        url: "/pages/attendance/detail",
      });
    },
    //去打卡页面
    goClockIn() {
      uni.navigateTo({
        url: "/pages/attendance/clock-in",
      });
    },
    toRealAuth() {
      uni.navigateTo({
        url: `/pages/auth/auth?projectAppId=${this.projectAppId}&userId=${this.userId}&projectId=${this.projectId}`,
      });
    },
    logOut() {
      uni.removeStorageSync("token");
      uni.removeStorageSync("userId");
      uni.removeStorageSync("userInfo");
      uni.switchTab({
            url: `/pages/home/index`,
          });
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #e4e4e4;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100px;
  padding-left: 20px;
  image {
    width: 80px;
    height: 80px;
    margin-right: 50px;
  }
}
.text-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 20px;
  color: #333;
  text {
    margin: 0 10px;
  }
}

.info {
  display: flex;
  flex-direction: column;
  height: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  .tr-title {
    background-color: #f2f2f2;
  }
}
table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}
.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 10px;
  button {
    height: 40px;
    width: 200px;
    /* margin-right: 10px; */
    /* margin-left: 10px; */
    text-align: center; /* 文字水平居中 */
    line-height: normal; /* 确保文字垂直居中 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
}

.has-text {
  font-size: 12px;
}
.attendance {
  margin-top: 20px;
}
</style>
